<template>
  <div :class="!iserror? 'app-content' :''" id="app">
    <div v-if="!iserror">
      <nav-bar :title="'提现'" />
      <div>
        <div class="charge-title">提现问题分类：<img src="../../assets/star.png" width="5px" height="5px"></div>
        <cube-select class="pay-input w-65_" v-model="appealData.question_type" :options="propWithDrawProblem">
        </cube-select>
        <div>
          <p class="errorMessage" v-show='errorMessage.question_type'>请选择提现问题分类</p>
        </div>

        <div v-if="appealData.question_type===202">

          <div class="charge-title">问题出现时间：<img src="../../assets/star.png" width="5px" height="5px"></div>
          <div class="charge-order pay-time" ref="getPayat">
            <div class="content edit-input" @click='showDateTimePicker'>
              {{pay_at}}
            </div>
            <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
          </div>
          <div>
            <p class="errorMessage" v-show='errorMessage.appear_at'>请选择问题出现时间</p>
          </div>
          <div class="charge-title">问题描述：<img src="../../assets/star.png" width="5px" height="5px"> </div>
          <cube-textarea v-model="appealData.desc"  placeholder="请详细描述您的问题，方便帮您快速解决哦" class="pay-textarea"
            :maxlength="1000"></cube-textarea>
          <div>
            <p class="errorMessage" v-show='errorMessage.desc'>请填写问题描述</p>
          </div>
          <div>
            <p class="errorMessage" v-show='exa.desc'>问题描述不得少于10字</p>
          </div>
        </div>
        <div v-else>
          <div class="charge-title">提现订单：<img src="../../assets/star.png" width="5px" height="5px"></div>
          <div :class="!showList?'charge-order showList':'charge-order'">
            <div class="content " v-show='showList' @click='chooseOrder("order")'>{{order_msg}}</div>
            <div class="content" v-show='!showList' @click='chooseOrder("order")'>
              <div><span>提现时间：</span><span>{{showOrderCard.created_at}}</span></div>
              <div><span>提现方式：</span><span>{{showOrderCard.type}}</span></div>
              <div><span>提现金额：</span><span>{{showOrderCard.price}}</span></div>
              <div><span>订单号：</span><span>{{showOrderCard.id}}</span></div>
            </div>
            <div class="right-arrow" @click='chooseOrder("order")'><i class="van-icon van-icon-play right-icon"></i>
            </div>
          </div>
          <div>
            <p class="errorMessage" v-show='errorMessage.withdraw_id'>无提现订单信息不能提交</p>
          </div>
          <div class="charge-title">提现时间：</div>
          <div class="charge-order pay-time" ref="getPayat">
            <div class="content edit-input" @click='showDateTimePicker'>
              {{pay_at}}
            </div>
            <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
          </div>
          <div class="charge-title">提现金额：</div>
          <div class="charge-order w-65_" id='charge-num'>
            <div class="content edit-input">
              <input v-model="appealData.amount"  @keyup="ckAmount()"  placeholder="" class="charge-input" ref="editNum">

            </div>
            <div class="right-arrow" @click="focusclick">编辑</div>
          </div>
          <div>
            <p class="errorMessage" v-show='errorMessage.amount'>请正确填写充值金额</p>
          </div>
          <div class="charge-title">补充说明： </div>
          <cube-textarea v-model="appealData.desc"   placeholder="若您有想对客服小妹说的话，可在这里悄悄说哦～" class="pay-textarea"
                         :maxlength="1000"></cube-textarea>

        </div>
        <div class="charge-title">上传图片：</div>
        <!-- 图片上传 -->
        <div class="upload-box">
          <cube-upload class="cube-upload" v-model="uploadfiles" :max="3" :action="upAction" :auto="false"
            :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted"
            @file-success="filesSuccess" @file-error="fileError" />

        </div>
        <div class="submit">
          <div>请确保以上信息填写无误，处理速度更快哦，<br><br>
            结果请在<span class="color-Gold">客服</span>-><span class="color-Gold">反馈记录</span>中查看哟</div>
          <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
        </div>
      </div>
      <van-popup v-model="showChargeOrder" :position="value=='date'?'bottom':null"
        :class="value=='date'?null:'orderpup'" :id="value=='uploadShouldKnow'?'uploadknow':null">
        <div class="charge-content" v-if="value=='order'" style="height: auto; overflow: hidden;">
          <div>
            <div class="title1">请选择提现订单</div>
            <div class="title2">可选择最近60天的订单</div>
            <img src="../../assets/close2.png" @click='showChargeOrder=false'>
          </div>
          <div v-if="Unpaylist" style="height: 375px;overflow-y: scroll;">
            <ul v-if="Unpaylist.length">
              <li v-for="(item,index) in Unpaylist" :key="index" @click="addMsg(item)">
                <div><span>提现时间：</span><span>{{item.created_at}}</span></div>
                <div><span>提现方式：</span><span>{{item.type}}</span></div>
                <div><span>提现金额：</span><span>{{item.price}}</span></div>
                <div><span>订单号：</span><span>{{item.id}}</span></div>
              </li>
            </ul>
            <div v-else style="text-align:center; margin:30px 0;">
              ~~暂无订单数据~~
            </div>
          </div>
          <div v-else style="text-align:center; margin:30px 0;">
            ~~暂无订单数据~~
          </div>
        </div>
      </van-popup>

      <div v-show='showLoading' class="showLoading">
        <cube-loading class="loading-div" :size="40"></cube-loading>
        <div class="loadingtext">{{loadingMsg}}</div>
      </div>
    </div>
    <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
  </div>
</template>

<script>
  const dateFormat = require('dateformat')
  import { Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem } from 'vant'
  import NavBar from '@/components/customerService/NavBar.vue'
  import error from '@/pages/error/App.vue'
  import { getInfo, submitWorkOrder } from '@/api/customerService'
  import { dataNullFilter, dataDescLengthFilter,ckAmount ,ckDesc} from '@/utils/ckData'
  import mixins from '@/model/mixins'


  export default {
    mixins: [mixins],
    components: {
      NavBar,
      'error-page': error,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [DatetimePicker.name]: DatetimePicker,
      [Field.name]: Field,
      [Uploader.name]: Uploader,
      [Popup.name]: Popup,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem
    },
    watch: {
      'appealData.question_type': function () {
        this.pay_at = '';
        this.showList = true;
        delete this.appealData.desc
        if (this.appealData.question_type === 201) {
          this.errorMessage.amount = false
          this.errorMessage.withdraw_id = false
          delete this.errorMessage.appear_at; delete this.appealData.appear_at;
          delete this.errorMessage.desc;
          delete this.exa.desc;
        } else if (this.appealData.question_type === 202) {
          this.errorMessage.appear_at = false
          this.errorMessage.desc = false
          this.exa.desc=false
          delete this.errorMessage.amount; delete this.appealData.amount;
          delete this.errorMessage.withdraw_id; delete this.appealData.withdraw_id;
        }
      },
      'appealData.desc':function () {
        console.log(this.appealData.desc)
        let desc=ckDesc(this.appealData.desc) ;
        this.appealData=Object.assign(this.appealData,{desc})
        this.$forceUpdate()
      }
    },
    data () {
      return {
        loadingMsg: '',
        iserror: false,
        propWithDrawProblem: this.$store.state.app.propWithDrawProblem,
        showChargeOrder: false,
        order_msg: '',
        appealData: {},
        showList: true,
        Unpaylist: [],
        uploadfiles: [],
        pay_at: '',
        upAction: {
          target: 'http://up-z2.qiniup.com',
          data: new FormData()
        },
        showOrderCard: {},
        filename: [],
        value: '',
        showLoading: false,
        iserrordata: false,
        iserrorDescLength: false,
        errorMessage: {
          question_type: false,
          desc: false,
          amount: false,
          appear_at: false,
          withdraw_id: false,
        },
        exa: {
          desc: false,
        },
        filenameNew: []
      }
    },
    created () {
    },
    mounted () {
      this.getUnpayStatus()
    },
    methods: {
      submitWorkOrder () {
        this.loadingMsg = "正在提交中..."

        this.appealData.images = this.filenameNew
        this.errorMessage = dataNullFilter(this.appealData, this.errorMessage, this);
        this.exa = dataDescLengthFilter(this.appealData, this.exa, this.errorMessage, this);
        this.$forceUpdate()
        if (this.iserrordata) {
          return;
        }
        else if (this.iserrorDescLength) {
          return;
        }
        else {
          this.showLoading = true
          Object.assign(this.appealData, { type_id: 2 })
          submitWorkOrder(this.appealData).then(res => {
            if (res.status === 0) {
              const QuerySerch = location.search
              location.href = `/success_cs${QuerySerch}`
            }
          }).catch(error => {
            this.showLoading = false
            if (error.response.data.status == -400) {
              this.iserror = true
            }
          })
        }
      },
      chooseOrder (pup) {
        this.showChargeOrder = true
        this.value = pup
      },
      selectHandle (date, selectedVal) {
        this.pay_at = dateFormat(date, 'yyyy-mm-dd HH:MM:ss')
        if (this.appealData.question_type === 202) {
          Object.assign(this.appealData, { appear_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss') })
        } else {
          Object.assign(this.appealData, { withdraw_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss') })
        }
      },
      addMsg (item) {
        this.showList = false
        this.showOrderCard = item
        this.appealData.withdraw_id = item.id
        this.pay_at = item.created_at
        if (this.appealData.question_type === 202) {
          Object.assign(this.appealData, { appear_at: item.created_at })
        } else {
          Object.assign(this.appealData, { withdraw_at: item.created_at })
        }
        this.appealData.amount = item.price
        this.showChargeOrder = false
      },
      getUnpayStatus () {
        let that = this
        this.order_msg = '数据加载中......'
        getInfo({ type_id: 2 }, this.$router.history.current.query).then(res => {
          if (res.status === 0) {
            this.order_msg = '请选择提现订单'
            that.Unpaylist = res.data.items.filter(item => {
              if (item.status !== 2)
                return item;
            })
          }
        })
      },
      // 点击编辑聚焦输入框
      focusclick () {
        this.$refs.editNum.focus()
      },
      ckAmount(){
        this.appealData.amount=ckAmount(this.appealData.amount)
        this.$forceUpdate()
      },
    },
    beforeDestroy () {
    },
  }
</script>
